<template>
  <el-dialog
    title="预览文章"
    :visible="dialogVisible"
    width="800px"
    @close="closeFn"
    @open="openFn"
  >
    <span>
      <h3>{{ object.title }}</h3>
      <p class="time">
        {{ parseTime(object.createTime) }}&nbsp; {{ userName }}&nbsp;
        <span class="el-icon-view"></span>&nbsp;
        {{ object.visits }}
      </p>
      <div v-html="object.articleBody" class="box"></div>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
import { parseTime } from '@/utils/index'
export default {
  name: 'ArticlesPreview',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: Number
    },
    userName: {
      type: String
    }
  },
  data () {
    return {
      object: {}
    }
  },
  methods: {
    // 关闭弹窗
    closeFn () {
      this.$emit('close-dialog')
    },
    // 文章详情
    async getArticlePreview () {
      const res = await detail({ id: this.curId })
      this.object = res.data
      console.log(res)
    },
    openFn () {
      this.getArticlePreview()
    },
    parseTime
  }
}
</script>

<style scoped >
.time {
  padding-left: 10px;
  margin-top: 0;
  font-size: 12px;
}
.box {
  background-color: rgb(245, 245, 245);
  padding: 5px 15px 30px 15px;
  font-size: 12px;
  border-top: 1px dashed black;
}
</style>
